Что нового в сети

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Rachel Andrew

Опубликовано: 20 мая 2025 г.

На Google I/O 2025 в докладе What's new in web были представлены все анонсы Baseline, а также обзор некоторых функций, которые стали частью Baseline в этом году. Это был удивительный год для веба, и для Baseline этот пост представляет собой обзор всего, что было упомянуто, со всеми ссылками, чтобы узнать больше.

Панель управления веб-платформы и веб-функции

В 2024 году мы объявили о первоначальном запуске панели мониторинга веб-платформы , которая использует набор данных веб-функций, позволяя вам исследовать все функции, входящие в состав Baseline.

Данные веб-функций теперь полны, все функции платформы отображены. Поскольку новые функции присоединяются к Baseline каждый месяц, данные обновляются, и все это отображается на панели управления.

Инструменты, которые помогут вам определить вашу собственную базовую цель

While you might base your browser support policy on the moving target of Baseline Widely available—like UK agency Clearleft —you can also adopt a fixed target based on a Baseline year. You can now use your own user data, along with the web-features data to work out the best target for you .

В прошлом году на конференции I/O мы объявили, что RUMvision внедрит Baseline в свой продукт, и эта интеграция теперь реализована.

Поскольку он использует ваши данные RUM, он помогает вам определить, какой базовый год следует принять на основе этих данных, а не глобального среднего. Он также может помочь вам увидеть, имеет ли для вас смысл Baseline Widely available.

Вы также можете использовать данные Google Analytics, чтобы четко увидеть, какой процент ваших пользователей поддерживает каждую базовую цель, с помощью нового средства проверки базовой линии Google Analytics .

Это всего лишь два из постоянно растущей коллекции инструментов, которые помогут вам сопоставить ваши реальные пользовательские данные с Baseline.

Группа сообщества Web DX недавно запустила расширение для Netlify , которое показывает поддержку различных базовых лет и широко доступно на ваших сайтах, чтобы помочь вам решить, на что ориентироваться в ваших инструментах сборки. Скоро появятся интеграции с продуктом Cloudflare Observatory RUM и Contentsquare.

Интегрируйте данные с вашими собственными инструментами

Данные веб-функций открыты и доступны для ваших собственных интеграций. Мы пытаемся сделать это проще.

Используйте API панели мониторинга веб-платформы или используйте данные веб-функций непосредственно из пакета npm .

Теперь вы можете сопоставлять версии браузеров с базовым целевым значением, используя модуль baseline-browser-mapping из группы сообщества W3C WebDX. Этот модуль можно использовать в среде JavaScript на стороне сервера или загружать файлы JSON или CSV, которые ежедневно обновляются из репозитория.

Эти данные включают сопоставления не только для основного набора браузеров Baseline, но и для следующих браузеров, таких как Samsung Internet, Opera, UC Browser и Android Webview.

Узнайте, поддерживаются ли функции вашей базовой целевой линией

Базовая информация теперь есть на большинстве страниц MDN и Can I Use, ее также можно найти на панели инструментов Web Platform и в статьях на web.dev и CSS Tricks. Однако все это требует поиска поддержки. Было бы гораздо полезнее, если бы базовая информация отображалась в вашей IDE по мере кодирования и как часть всех других используемых вами инструментов.

Мы рады сообщить вам, что многие ключевые инструменты теперь имеют встроенную поддержку Baseline или легко интегрируются.

browserslist-config-baseline

Многие инструменты, такие как Babel и PostCSS, используют список браузеров для определения поддерживаемых браузеров.

Вместе с WebDX CG и членами сообщества команда Chrome помогла выпустить новый инструмент под названием browserslist-config-baseline . Он позволяет вам настраивать цели браузеров в базовых терминах, таких как широко доступные или базовые годы.

Благодаря этому любой инструмент, принимающий целевой параметр Browserslist, теперь может быть выражен в терминах Baseline.

Более подробную информацию можно найти в статье Использование базового уровня с браузерами .

Базовый уровень в линтерах — ESLint и Stylelint

Использование Baseline с линтерами недавно стало возможным благодаря нескольким новым инструментам в области линтеров, начиная с ESLint для CSS .

Baseline ESLint has a use-baseline rule. You can set this to your preferred Baseline target, and it'll warn you when using any features that are newer than your target. You can choose how to resolve those warnings: either by replacing that feature with primitives or by suppressing the linter warning, which is a perfectly valid solution when you know you're using a cutting edge feature safely, for example if it's a progressive enhancement.

По умолчанию ESLint не будет предупреждать, если в блоках @supports используются новые функции, поскольку неподдерживаемые браузеры в любом случае не будут их оценивать.

Для нужд HTML-линтинга также существует плагин сообщества под названием html-eslint.

Stylelint официально поддерживает плагин stylelint-plugin-use-baseline . Это правило ведет себя так же, как правило ESLint для CSS, но вместо этого оно работает на Stylelint.

Многие линтеры также имеют плагины IDE, поэтому вы можете получать немедленную обратную связь о состоянии базовой линии во время кодирования с помощью волнистых подчеркиваний.

Базовый уровень в VS Code и JetBrains WebStorm

Многие IDE уже давно поддерживают возможность наведения курсора на функцию в редакторе и просмотра списка поддерживаемых версий браузеров.

Однако бывает довольно сложно понять, действительно ли безопасна эта функция — нужно мысленно проанализировать, отсутствуют ли в этом списке какие-либо основные браузеры и насколько новой является версия этого браузера.

Чтобы решить эту проблему, мы объединились с самой популярной средой IDE, используемой миллионами веб-разработчиков, VS Code, чтобы интегрировать данные Baseline непосредственно в эти всплывающие карточки.

Теперь вы можете навести курсор на функцию, и она просто сообщит вам, считается ли эта функция базовой и как долго она будет существовать, или есть ли какие-либо основные браузеры, которые еще не полностью ее реализовали.

Поддерживаемые функции включают свойства CSS, элементы HTML и атрибуты HTML. Узнайте больше в Visual Studio Code теперь поддерживает Baseline .

Такая интеграция означает, что любые IDE, основанные на VS Code, также получат выгоду от этих ховеркарт.

И мы также можем объявить, что JetBrains внедряет всплывающие карточки в свою среду разработки WebStorm JavaScript и TypeScript.

Интернет совершенствуется быстрее, чем когда-либо

Мы надеемся, что Baseline поможет вам воспользоваться тем фактом, что совместимый Интернет развивается быстрее, чем когда-либо.

Вы можете использовать панель мониторинга веб-платформы, чтобы увидеть все функции, которые стали новыми базовыми функциями за последние двенадцать месяцев — с момента проведения Google I/O 2024.

Также есть ряд функций, которые, как вы можете быть уверены, станут Baseline Newly доступными очень скоро, поскольку они включены в проект Interop 2025. Вы можете прочитать обо всех включенных функциях в Interop2025: еще один год улучшений веб-платформы .

Режимы письма вбок

Мы уже видели, как одна функция стала базовой. Недавно доступны значения sideways-rl и sideways-lr для свойства CSS writing-mode . Если вы используете режим вертикального письма исключительно для целей макета, то значения sideways, скорее всего, будут теми, к которым следует стремиться.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

Позиционирование якоря

Позиционирование привязки реализовано в Chrome 125. Оно позволяет привязать положение элемента к привязке, например, при открытии всплывающей подсказки с помощью кнопки.

Теперь он включен в Interop 2025, поэтому в этом году мы должны увидеть его в Baseline.

Основные веб-показатели: LCP и INP

API-интерфейс LCP

API синхронизации событий (для INP)

Web Vitals может помочь вам количественно оценить опыт вашего сайта и определить возможности для улучшения. Инициатива Web Vitals направлена ​​на упрощение ландшафта и помощь сайтам в фокусировке на наиболее важных показателях — Core Web Vitals.

Interop 2025 включает метрики «Отрисовка самого большого содержимого» (LCP) и «Взаимодействие со следующей отрисовкой» (INP) за счет реализации API LargestContentfulPaint и API синхронизации событий в разных браузерах.

Улучшения элемента <details>

Сам элемент <details> уже доступен в Baseline Widely. Он был включен в Interop 2025, поскольку есть ряд функций, которые делают виджеты раскрытия с <details> более полезными.

Элемент <details> содержит элемент <summary> , который является частью, видимой на странице, когда элемент <details> свёрнут. За пределами <summary> находится содержимое элемента <details> , оно скрыто, пока пользователь не нажмёт на резюме.

Одной из вещей, которая будет реализована в Interop 2025, является скрытие контента с помощью content-visibility вместо display , что означает, что если его не развернуть, контент вообще не будет отображаться.

Также частью работы Interop 2025 является псевдоэлемент ::marker . Псевдоэлемент ::marker позволяет стилизовать треугольник раскрытия элемента <summary> .

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

Затем еще один псевдоэлемент — ::details-content .

::details-content представляет содержимое — часть элемента details, которая раскрывается и сворачивается, и позволяет вам стилизовать ее.

[open]::details-content {
  border: 5px dashed hotpink;
}

Также есть несколько приятных улучшений, таких как автоматическое расширение элемента <details> с совпадениями find-in-page и приведение значения until-found атрибута HTML hidden к Baseline Newly available. Это скрывает элемент до тех пор, пока он не будет найден с помощью поиска find-in-page браузера или пока к нему не будет выполнен прямой переход по фрагменту URL.

CSS @scope

Правило CSS @scope позволяет вам ограничить область действия ваших селекторов. Задавая корневую область видимости с помощью @scope , любые правила стилей, вложенные в правило at, применяются только к этому дереву DOM.

Например, если вы хотите нацелиться только на элементы <img> внутри элемента с классом .card , то .card станет корнем области действия.

@scope (.card) {
    img {
        border-color: green;
    }
}

Подробнее читайте в статье Ограничение области действия селекторов с помощью правила CSS @scope at-rule .

scrollend

Еще одна функция, которая снижает сложность и улучшает интерфейсы прокрутки, — scrollend . Без события scrollend нет надежного способа определить, что прокрутка завершена.

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

При возникновении события scrollend браузер выполняет всю эту сложную оценку за вас.

document.onscrollend = event => {…}

Дополнительные примеры см. в Scrollend, новом событии JavaScript .

Переходы между представлениями одного и того же документа

И последнее, но не менее важное: переходы между представлениями являются частью Interop 2025. Работа включает переходы между представлениями в рамках одного документа, то есть для одностраничных приложений, а также классы переходов между представлениями.

Следите за информационными панелями Interop 2025, чтобы увидеть, как проект развивается по мере развития года.

Функции, включенные в Interop 2025, будут не единственными, которые войдут в Baseline в этом году, но их включение в проекты дает нам довольно хороший знак того, что они имеют приоритет и скоро появятся.

Мы только начинаем

Это был захватывающий год для Baseline, и мы продвинулись далеко вперед с наших прошлогодних объявлений. Теперь мы находимся в положении, когда заполнение данных веб-функций завершено. Это открыло шлюзы и позволило создать инструменты для разработчиков. Мы действительно только начинаем, и если у вас есть продукт или инструмент с открытым исходным кодом, который выиграл бы от включения этих данных, мы будем рады услышать от вас.

Следите за web.dev, поскольку мы продолжим публиковать объявления о новых инструментах, а также обучающие материалы, которые помогут вам воспользоваться всеми преимуществами, которые может предложить Интернет.